<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      :pageInfo="pager"
      :dataInfo="dataInfo"
      :listData="tableData"
      :filterList="filterList"
      operaColumnWidth="120"
      :operaInfo="['preview']"
      placeholder="请输入工程名称"
      searchName="keyword"
      :menuList="['export']"
      @btn-click="handleBtnClick"
      @menu-click="exportData"
    />
    <overviewDialog ref="overview" />
  </basic-container>
</template>

<script>
import { getOverviewList } from "@/views/wy-operate/api/repair";
import overviewDialog from './dialog'
export default {
  components: {
    overviewDialog
  },
  provide () {
    return {
      initList: this.queryData,
    };
  },
  data () {
    return {
      // 表格列表数据
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 20,
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20 // 每页显示多少条
      },
      // 页面loading
      loading: false,
      filterList: [
        // { label: '文字搜索筛选', inputType: 'input', name: 'input' },
        // { label: '字典筛选', inputType: 'dict', dictName: 'contract_type', name: 'dict' },
        // { label: '单选筛选', inputType: 'radio', name: 'radio', children: [{ label: '选项1', value: '1' }, { label: '选项2', value: '0' }] },
        // { label: '多选筛选', inputType: 'checkbox', name: 'checkbox', children: [{ label: '选项1', value: '1' }, { label: '选项2', value: '0' }] },
        // { label: '下拉筛选', inputType: 'select', name: 'select', children: [{ label: '选项1', value: '1' }, { label: '选项2', value: '0' }], multiple: true },
        // { label: '日期时间筛选', inputType: 'datetime', name: 'datetime', },
        // { label: '日期筛选', inputType: 'date', name: 'date', },
        // { label: '日期区间', inputType: 'daterange', name: ['startTime', 'endTime'] },
        // { label: '日期时间区间', inputType: 'datetimerange', name: ['startTime', 'endTime'] },
        // { label: '数字区间', inputType: 'numberRange', name: ['startNum', 'endNum'] },
      ],
    }
  },
  computed: {
    // 展示列
    dataInfo () {
      return [
        { label: "物业名称", width: "200", prop: "propertyName", 'show-overflow-tooltip': true },
        { label: "工程名称", width: "250", prop: "engineeringName", 'show-overflow-tooltip': true },
        { label: "合同签订日期", width: "120", prop: "signTime", formatter: this.dateFormatter},
        { label: "合同金额", width: "120", prop: "totalAmount", formatter: this.priceFormatter},
        { label: "结算审核金额", width: "120", prop: "approvalAmount", formatter: this.priceFormatter},
        { label: "已付金额", width: "120", prop: "payAmount", formatter: this.priceFormatter },
				{ label: "未付金额", width: "120", prop: "residentAmount", formatter: this.priceFormatter }
      ]
    },
  },
  beforeMount () {
    this.queryData();
  },
  methods: {
    // 数据请求
    queryData (params = {}) {
      this.loading = true
      let requestData = { ...this.params, ...params }
      getOverviewList(requestData).then(res => {
        const { current, size, total, records } = res.data.data
        this.tableData = records
        this.params = requestData
        this.pager = { total, current, size }
      }).finally(() => {
        this.loading = false
      })
    },
    //表格按钮点击事件监听
    handleBtnClick ({ type, row }) {
      this.$refs.overview.show(row.obtId)
    },
    // 导出
    async exportData () {
      this.publicExport('修缮概览记录', '/api/operating/repair/overview/export', this.params)
    },
  }
}
</script>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
  }
}
</style>
